{extend name="base" /}
{block name="content"}
<style>
    #container{
        min-width:600px;
        min-height:767px;
    }
</style>
<div>
    <input type="text" id="lng" placeholder="经度" value="{$lng}">
    <input type="text" id="lat" placeholder="纬度" value="{$lat}">
    <input type="text" id="keyword"><input type="button" value="搜索" onclick="searchKeyword()">
</div>
<!--   定义地图显示容器   -->
<div id="container"></div>
{/block}
{block name="extrajs"}
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=4PWBZ-2DVL4-G3JUF-DYNDC-33TUV-L3FPT"></script>
<script>
    var searchService,map,markers = [];
    var lat="{$lat}";
    var lng="{$lng}";

    var init = function() {
        if(lat!=""&&lng!="") {
            var center = new qq.maps.LatLng(lat, lng);
        }else{
            var center = new qq.maps.LatLng(44.83980376613671,126.53348922729492);
        }
        map = new qq.maps.Map(document.getElementById('container'),{
            center: center,
            zoom: 13
        });
        var latlngBounds = new qq.maps.LatLngBounds();
        //调用Poi检索类
        searchService = new qq.maps.SearchService({
            complete : function(results){                var pois = results.detail.pois;
                for(var i = 0,l = pois.length;i < l; i++){
                    var poi = pois[i];
                    latlngBounds.extend(poi.latLng);
                    var marker = new qq.maps.Marker({
                        map:map,
                        position: poi.latLng
                    });

                    marker.setTitle(i+1);

                    markers.push(marker);
                }
                map.fitBounds(latlngBounds);
            }
        });

        //添加监听事件   获取鼠标单击事件
        qq.maps.event.addListener(map, 'click', function(event) {
            console.log(event);
            var marker=new qq.maps.Marker({
                position:event.latLng,
                map:map
            });
            document.getElementById("lng").value=event.latLng.lng;
            document.getElementById("lat").value=event.latLng.lat;
            clearOverlays(markers);
            markers.push(marker);

        });

        if(lat!=""&&lng!="") {
            var marker = new qq.maps.Marker({
                position: center,
                map: map
            });
            markers.push(marker);
        }


    }

    window.onload=function(){
        init();
    };


    //清除地图上的marker
    function clearOverlays(overlays){
        var overlay;
        while(overlay = overlays.pop()){
            overlay.setMap(null);
        }
    }

    function searchKeyword() {
        var keyword = document.getElementById("keyword").value;
        //var region = document.getElementById("region").value;
        clearOverlays(markers);
        //searchService.setLocation(region);
        searchService.search(keyword);
    }

    function getLnglat(){
        var lnglat={
            lng:document.getElementById("lng").value,
            lat:document.getElementById("lat").value
        };
        return lnglat;
    }
</script>
{/block}